import React, { useEffect, useState } from "react";
import { View, Text, Button, FlatList } from "react-native";
import ProductItem from "./ProductItem"; 
import productsData from "./products.json";

// 定义一个名为ProductList的函数组件，它接受一个名为onAddToCart的props，用于处理添加产品到购物车的逻辑
const ProductList = ({ onAddToCart }) => {
  // 使用useState hook初始化一个名为products的状态变量，用于存储产品列表
  const [products, setProducts] = useState([]);

  // 使用useEffect hook来处理组件挂载和更新时的逻辑
  useEffect(() => {
    // 从本地的8080端口获取产品数据
    fetch("http://localhost:8080/products.json") 
      .then((response) => response.json()) 
      .then((data) => setProducts(data)) 
      .catch((error) => console.error("Fetching products failed", error)); 
    // setProducts(productsData); 
  }, []);

  // 组件的渲染部分
  return (
    <View>
      <FlatList
        data={products} // 将状态变量products作为数据源
        keyExtractor={(item) => item.id.toString()} 
        renderItem={({ item }) => ( 
          <ProductItem
            name={item.name}
            price={item.price}
            onAdd={() => onAddToCart(item)} // 点击时触发添加到购物车的函数
          />
        )}
      />
      <Button title="查看购物车" onPress={() => navigation.navigate("Cart")} /> 
    </View>
  );
};

export default ProductList;
